<template>
    <view class="gjl-view">
        <view class="main">
            <view class="books-ul">
                <view class="books-li" v-for="(item,index) in planData" :key="index">
                    <view class="img-box">
                        <image :src="item.bookstoreImg" mode=""></image>
                    </view>
                    <view class="books-name cl1">
                        {{item.bookstoreName}}
                    </view>
                    <view class="tip" @click="remove(item)">
                        <view class="text">
                            删除
                        </view>
                    </view>
                </view>
                <view class="books-li del">
                    <view class="add-box" @click="$routerTo({path: '/pagesMine/bookstore/index',query:{temp:pos.temp},type:'RT'})">
                        <mIcon type="jiahao" color="#fff" size="36"></mIcon>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import service from "@/service";
    export default {
        data(){
            return {
                pos: {},
                planData: []
            }
        },
        onLoad(res){
            this.pos = res
            this.getData()
        },
        methods:{
            // 获取阅读计划
            getData(){
                service.mineService.BookstorePlan({
                    data: {
                        Timestamp: this.pos.temp
                    },
                    success: res => {
                        if(res.result){
                            this.planData = res.result
                        }else{
                            this.planData = []
                        }
                    },
                    fail: () => {
                
                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            // 删除
            remove(item){
                uni.showModal({
                    title: '提示',
                    content: '是否要删除此分类',
                    success: (res) => {
                        if (res.confirm) {
                            service.mineService.BookstorePlanDel({
                                data: {
                                    BookstorePlanIds: item.BookstorePlanId
                                },
                                success: res => {
                                    this.getData()
                                },
                                fail: () => {
                                
                                },
                                complete: () => {
                                    uni.hideLoading();
                                },
                            })
                        } else if (res.cancel) {
                            
                        }
                    }
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-view{
        min-height: 100%;
        overflow: hidden;
        .main{
            margin: 0 50rpx;
            .books-ul{
                margin-top: 30rpx;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                .books-li.del{
                    .add-box{
                        background:rgba(218,218,218,1);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 100%;
                        height:233rpx;
                    }
                }
                .books-li{
                    margin-bottom: 30rpx;
                    position: relative;
                    width:310rpx;
                    .books-name{
                        margin-top: 23rpx;
                        font-size:28rpx;
                        font-weight:bold;
                        color:rgba(51,51,51,1);
                    }
                    .img-box{
                        height:233rpx;
                        width: 100%;
                        display: flex;
                        background:rgba(218,218,218,1);
                        image{
                            height: 100%;
                            width: 100%;
                        }
                    }
                    .tip{
                        position: absolute;
                        top: 0;
                        right: 0;
                        font-size:28rpx;
                        font-weight:400;
                        color:rgba(255,255,255,1);
                        background:rgba(247,84,95,1);
                        padding: 4rpx 30rpx;
                    }
                }
            }
        }
    }
</style>